<template>
  <div class="expense-ranking section-card">
    <h3>支出排行</h3>
    <ul>
      <li v-for="(item, index) in expenses" :key="index" class="flex-between">
        <span>{{ index + 1 }}. {{ item.content }}</span>
        <span>¥{{ item.amount }}</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
const expenses = [
  { content: '猫粮狗粮', amount: 449.00 },
  { content: '耳机', amount: 118.10 },
  // 更多数据...
];
</script>

<style scoped lang="scss">
.expense-ranking {
  margin-top: 10px;
  li {
    padding: 10px 12px;
    margin-bottom: 6px;
    background-color: #f0f6ff;
    border-radius: 8px;
  }
}
</style> 